<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>cube</title>
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <style media="screen">
    .ct {
      width: 200px;
      height: 200px;
      position: relative;
      margin: 40px auto;
      border: 1px solid #cc;
      perspective: 1200px;
    }

    @keyframes spining {
      0% {
        transform: translateZ( -100px) rotateX( 0deg) rotateY( 0deg) rotateZ(0deg);
      }
      100% {
        transform: translateZ( -100px) rotateX( 360deg) rotateY( 360deg) rotateZ(360deg);
      }
    }
    #cube {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      transform: translateZ( -100px) rotateX( 0deg) rotateY( 0deg) rotateZ(0deg);
      animation: spining 4s infinite;
    }

    #cube .front {
      transform: translateZ( 100px);
      background-color: red;
    }

    #cube .right {
      transform: rotateY( 90deg) translateZ( 100px);
      background-color: blue;
    }

    #cube .back {
      transform: rotateX( -180deg) translateZ( 100px);
      background-color: yellow;
    }

    #cube .left {
      transform: rotateY( -90deg) translateZ( 100px);
      background-color: pink;
    }

    #cube .top {
      transform: rotateX( 90deg) translateZ( 100px);
      background-color: grey;
    }

    #cube .bottom {
      transform: rotateX( -90deg) translateZ( 100px);
      background-color: green;
    }

    #cube figure {
      display: block;
      position: absolute;
      width: 196px;
      height: 196px;
      border: 2px solid black;
      line-height: 196px;
      font-size: 120px;
      font-weight: bold;
      color: white;
      text-align: center;
      margin: 0;
    }


  </style>
</head>

<body>
  <section class="ct">
    <div id="cube">
      <figure class="front">1</figure>
      <figure class="back">2</figure>
      <figure class="right">3</figure>
      <figure class="left">4</figure>
      <figure class="top">5</figure>
      <figure class="bottom">6</figure>
    </div>
  </section>
</body>

</html>
